<template>
  <div class="msg-page">
    <template v-if="dataList?.length">
      <div
        class="msg-list"
        v-for="item in dataList"
        :key="item.id"
        @click="goPlanDetailPage(item)"
      >
        <div class="msg-item">
          <el-card shadow="always">
            <div class="content">
              <p>
                {{ item.companyName }}
                <span class="text-theme-color">规划</span>
              </p>
            </div>
            <p style="text-align:right">{{item.createTime}}</p>
          </el-card>
        </div>
      </div>
    </template>
    <el-empty v-else description="空空如也~" />
  </div>
</template>

<script setup lang="ts">
import { usePlanHooks } from "./hooks";

const { dataList, goPlanDetailPage } = usePlanHooks();
</script>

<style scoped lang="postcss">
.msg-page {
  @apply bg-white py-2 px-4 pt-4;
  .page-title {
    @apply font-bold mb-4 text-xl;
  }
  .msg-item {
    cursor: pointer;
    @apply mb-3;
    .content {
      @apply flex justify-between items-center;
    }
    &:last-child {
      /* @apply mb-0; */
    }
  }
}
</style>
